<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
    <head>
        <title>openWYSIWYG | Create or Modify Table</title>

        <style type="text/css">
            body, td {
                font-family: arial, verdana, helvetica; 
                font-size: 11px;
            }

            select, input, button {
                font-size: 10px;
            }

            .table-settings {
                background-color: #F7F7F7; 
                border: 2px solid #FFFFFF; 
                padding: 5px;			
            }
        </style>

    </head>
    <script type="text/javascript" src="../scripts/wysiwyg-popup.js"></script>
    <script type="text/javascript" src="../scripts/wysiwyg-color.js"></script>

    <script type="text/javascript">
        var n = WYSIWYG_Popup.getParam('wysiwyg');

        // add stylesheet file
        if (n)
            document.write('<link rel="stylesheet" type="text/css" href="../' + WYSIWYG.config[n].CSSFile + '">\n');

        /* ---------------------------------------------------------------------- *\
         Function    : buildTable()
         Description : Builds a table and inserts it into the WYSIWYG.
         \* ---------------------------------------------------------------------- */
        function buildTable() {

            var WYSIWYG_Table = window.opener.WYSIWYG_Table;
            var doc = WYSIWYG.getEditorWindow(n).document;
            // create a table object
            var table = doc.createElement("TABLE");
            // set cols and rows
            WYSIWYG_Core.setAttribute(table, "tmpcols", document.getElementById("cols").value);
            WYSIWYG_Core.setAttribute(table, "tmprows", document.getElementById("rows").value);
            // alignment
            if (document.getElementById("alignment").value != "")
                WYSIWYG_Core.setAttribute(table, "align", document.getElementById("alignment").value);

            // style attributes
            var style = "";
            // padding
            style += "padding:" + document.getElementById("padding").value + "px;";
            // width
            style += "width:" + document.getElementById("width").value + document.getElementById("widthType").value + ";";
            // border
            style += "border:" + document.getElementById("border").value + "px;";
            // borderstyle
            if (document.getElementById("borderstyle").value != "none")
                style += "border-style:" + document.getElementById("borderstyle").value + ";";
            // border-color
            if (document.getElementById("bordercolor").value != "none")
                style += "border-color:" + document.getElementById("bordercolor").value + ";";
            // border-collapse
            var collapse = document.getElementById("bordercollapse").checked ? "true" : "separate";
            style += "border-collapse:" + collapse + ";";
            // background-color
            if (document.getElementById("backgroundcolor").value != "none")
                style += "background-color:" + document.getElementById("backgroundcolor").value + ";";

            WYSIWYG_Core.setAttribute(table, "style", style);


            WYSIWYG_Table.create(n, table);
            window.close();
            return;

            // Checks if the table border will use the BORDER-COLLAPSE CSS attribute
            var collapse;
            if (document.getElementById('borderCollapse').checked == true) {
                collapse = document.getElementById('borderCollapse').value;
            }
            else {
                collapse = "separate";
            }

            // Builds a table based on the data input into the form
            var table = '<table border="0" cellpadding="0" cellspacing="0" style="';
            table += 'BORDER-COLLAPSE: ' + collapse + ';';
            table += ' border: ' + document.getElementById('borderWidth').value + ' ' + document.getElementById('borderStyle').value + ' ' + document.getElementById('borderColor').value + ';';
            table += ' width: ' + document.getElementById('tableWidth').value + document.getElementById('widthType').value + ';';
            table += ' background-color: ' + document.getElementById('shadingColor').value + ';"';
            table += ' alignment="' + document.getElementById('alignment').value + '">\n';

            // Creates the number of rows and cols the table will have
            for (var i = 0; i < document.getElementById('rows').value; i++) {
                table += '<tr>\n';
                for (var j = 0; j < document.getElementById('cols').value; j++) {
                    table += '<td style="border: ' + document.getElementById('borderWidth').value + ' ' + document.getElementById('borderStyle').value + ' ' + document.getElementById('borderColor').value + '; padding: ' + document.getElementById('padding').value + ';">&nbsp;</td>\n';
                }
                table += '</tr>\n';
            }
            table += '</table>\n';


            // Inserts the table code into the WYSIWYG editor	
            WYSIWYG.insertHTML(table, n);
            window.close();
        }
    </script>

    <body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onload="WYSIWYG_ColorInst.init();">

        <table border="0" cellpadding="0" cellspacing="0" style="width:100%;padding: 10px;">
            <tr>
                <td>
                    <span style=" font-weight: bold;">Table Properties:</span>

                    <table style="width:100%;" border="0" cellpadding="1" cellspacing="0"
                           class="table-settings">
                        <tr>
                            <td style="width: 20%;">
                                Rows:
                            </td>
                            <td style="width: 25%;">
                                <input type="text" size="4" id="rows" name="rows" value="2" style="width: 50px;">
                            </td>
                            <td style="width: 25%;">
                                Width:
                            </td>
                            <td style="width: 30%;">
                                <input type="text" name="width" id="width" value="100" size="10" style="width: 50px;">
                                <select name="widthType" id="widthType"
                                        style="margin-right: 10px; font-size: 10px;">
                                    <option value="%">%</option>
                                    <option value="px">px</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Cols:
                            </td>
                            <td>
                                <input type="text" size="4" id="cols" name="cols" value="2"	style="width: 50px;">
                            </td>
                            <td>
                                Alignment:
                            </td>
                            <td>
                                <select name="alignment" id="alignment" style="margin-right: 10px; width: 95px;">
                                    <option value="">Not Set</option>
                                    <option value="left">Left</option>
                                    <option value="right">Right</option>
                                    <option value="center">Center</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Padding:
                            </td>
                            <td>
                                <input type="text" id="padding" name="padding" value="2" style="width: 50px;">
                            </td>
                            <td>
                                Background-Color:
                            </td>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="25">
                                            <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>
                                                        <input type="text" name="backgroundcolor" id="backgroundcolor" value="none" style="width:50px;">
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <button style="margin-left: 2px;" onClick="WYSIWYG_ColorInst.choose('backgroundcolor');">
                                                Choose
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Border-Size:
                            </td>
                            <td>
                                <input type="text" size="4" id="border" name="border" value="0" style="width: 50px;">
                            </td>
                            <td>
                                Border-Color:
                            </td>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="25">
                                            <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td>												
                                                        <input type="text" name="bordercolor" id="bordercolor" value="none" style="width:50px;">
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <button style="margin-left: 2px;" onClick="WYSIWYG_ColorInst.choose('bordercolor');">
                                                Choose
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Border-Style:
                            </td>
                            <td>
                                <select id="borderstyle" name="borderstyle" style="width: 80px;">
                                    <option value="none">none</option>
                                    <option value="solid">solid</option>
                                    <option value="double">double</option>
                                    <option value="dotted">dotted</option>
                                    <option value="dashed">dashed</option>
                                    <option value="groove">groove</option>
                                    <option value="ridge">ridge</option>
                                    <option value="inset">inset</option>
                                    <option value="outset">outset</option>
                                </select>
                            </td>
                            <td>
                                Border-Collapse:
                            </td>
                            <td>
                                <input type="checkbox" name="bordercollapse" id="bordercollapse">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div align="right">
            <input type="submit" value="  Submit  " onClick="buildTable();"
                   style="font-size: 12px;">
            &nbsp;
            <input type="submit" value="  Cancel  " onClick="window.close();"
                   style="font-size: 12px; margin-right: 15px;">
        </div>
    </td>
</tr>
</table>
</div>
</body>
</html>